<!DOCTYPE html>
<html>
<head>
    <title>客户列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        h1 {
            color: #333;
            margin: 20px 0;
        }
        .flash {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80%;
            text-align: center;
        }
        .flash.error {
            background-color: #ffe6e6;
            border-color: #ffcccc;
            color: #b30000;
        }
        .flash.success {
            background-color: #e6ffe6;
            border-color: #ccffcc;
            color: #006600;
        }
        table {
           /*  width: 100%; 使表格宽度占满容器 */
            width: 1200px;
            border-collapse: collapse; /* 合并边框 */
            margin: 0 auto; /* 上下外边距为 0，左右外边距自动，实现水平居中 */
        }
        th, td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        a {
            display: inline-block; /* 改为行内块元素 */
            margin: 0 5px; /* 调整间距 */
            text-decoration: none;
            color: #007BFF;
            font-size: 16px;
        }
        a:hover {
            text-decoration: underline;
        }
        .delete-button {
            color: #dc3545; /* 红色 */
            cursor: pointer;
        }
        .delete-button:hover {
            color: #a71d2a; /* 更深的红色 */
        }
        .add-amount-button {
            color: #28a745; /* 绿色 */
            cursor: pointer;
        }
        .add-amount-button:hover {
            color: #218838; /* 更深的绿色 */
        }
        .view-deposits-button {
            color: #17a2b8; /* 蓝色 */
            cursor: pointer;
        }
        .view-deposits-button:hover {
            color: #138496; /* 更深的蓝色 */
        }
        form {
            display: inline; /* 表单行内显示 */
        }
        .allow-overdraft-checkbox {
            margin: 0 5px;
        }


        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .search-input {
            width: 150px;
            padding: 8px;
            margin-right: 10px;
        }
        .search-button {
            padding: 8px 16px;
        }
         .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .pagination a {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        .pagination a:hover {
            background-color: #007BFF;
            color: white;
        }
        .pagination .active {
            background-color: #007BFF;
            color: white;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .pagination a, .pagination span {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        
        .pagination a:hover, .pagination .active {
            background-color: #007BFF;
            color: white;
        }
        
        .pagination .ellipsis {
            padding: 8px 15px;
            margin: 0 5px;
            color: #333;
}

       .link-container {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
    </style>
</head>
<body>
    <h1>客户列表</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}


    <div class="search-container">
        <form method="GET" action="{{ url_for('list_customers') }}">
            <input type="text" name="search" value="{{ search_query }}" placeholder="输入搜索内容" class="search-input">
            <select name="sort" class="search-input">
                <option value="name" {% if sort == 'name' %}selected{% endif %}>客户姓名</option>
                <option value="prepaid_amount" {% if sort == 'prepaid_amount' %}selected{% endif %}>账户金额</option>
                <option value="account_manager" {% if sort == 'account_manager' %}selected{% endif %}>开户人</option>
                <option value="created_at" {% if sort == 'created_at' %}selected{% endif %}>开户时间</option>
            </select>
            <select name="order" class="search-input">
                <option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
                <option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
            </select>
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>

    
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>客户名称</th>
                <th>预存余额</th>
                <th>开户人</th>
                <th>创建时间</th>
                <th>允许透支</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in customers %}
            <tr>
                <td>{{ customer.id }}</td>
                <td>{{ customer.name }}</td>
                <td>{{ customer.prepaid_amount | round(2) }} 元</td>
                <td>{{ customer.account_manager }}</td>
                <td>{{ customer.created_at.strftime('%Y-%m-%d') }}</td>
                <td>
                    <input type="checkbox" class="allow-overdraft-checkbox" 
                           data-customer-id="{{ customer.id }}" 
                           {% if customer.allow_overdraft %}checked{% endif %}>
                </td>
                <td>
                    <a href="{{ url_for('customer_sales', customer_id=customer.id) }}">查看购买明细</a>
                    <a href="{{ url_for('add_customer_amount', customer_id=customer.id) }}">调整存入金额</a>
                    <a href="{{ url_for('view_customer_deposits', customer_id=customer.id) }}">查看存入明细</a>
                    <form action="{{ url_for('delete_customer', customer_id=customer.id) }}" method="POST" onsubmit="return confirm('确定要删除该客户吗？');">
                        <button type="submit" class="delete-button">删除</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="pagination">
        {% if customers.has_prev %}
            <a href="{{ url_for('list_customers', page=customers.prev_num, search=search_query ,sort=sort, order=order) }}">上一页</a>
        {% endif %}
        
        {% for page_num in customers.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page_num %}
                {% if page_num == customers.page %}
                    <span class="active">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('list_customers', page=page_num, search=search_query,sort=sort, order=order) }}">{{ page_num }}</a>
                {% endif %}
            {% else %}
                <span class="ellipsis">…</span>
            {% endif %}
        {% endfor %}
        
        {% if customers.has_next %}
            <a href="{{ url_for('list_customers', page=customers.next_num, search=search_query,sort=sort, order=order) }}">下一页</a>
        {% endif %}
    </div>
    <div class="link-container">
        <a href="{{ url_for('add_customer') }}">添加新客户</a>
        <a href="{{ url_for('index') }}">返回主页</a>
    </div>
    <script>
        // 监听复选框的点击事件
        document.querySelectorAll('.allow-overdraft-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const customerId = this.getAttribute('data-customer-id');
                const allowOverdraft = this.checked;

                // 发送 AJAX 请求更新允许透支状态
                fetch(`/toggle_overdraft/${customerId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ allow_overdraft: allowOverdraft }),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('允许透支状态已更新！');
                    } else {
                        alert('更新失败，请重试！');
                        this.checked = !allowOverdraft; // 恢复复选框状态
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('更新失败，请重试！');
                    this.checked = !allowOverdraft; // 恢复复选框状态
                });
            });
        });
    </script>
</body>
</html>